<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="imageUrl+psInfo.faceUrl"></div>
      <div class="dashboard-workplace-header-tip">
      <p class="dashboard-workplace-header-tip-title" v-text="psInfo.name || '-'">
      </p>

      <div class="dashboard-workplace-header-tip-desc">
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">手机号: {{ psInfo.balance }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">关联房屋: {{ psInfo.allOrderCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp pb-1">关联承租人: {{ psInfo.allConsumeCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">总房租缴纳金额: {{ psInfo.integralCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">总保证金缴纳金额: {{ psInfo.mothOrderCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">总滞纳金缴纳金额: {{ psInfo.mothConsumeCount }}</span>
      <span class="dashboard-workplace-header-tip-desc-sp">总物业费缴纳金额: {{ psInfo.mothConsumeCount }}</span>
      </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="4">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData.data" class="tabNumWidth"  v-loading="loading" max-height="400">
          <el-table-column
            :prop="item.key"
            :label="item.title"
            width="item.minWidth"
            :show-overflow-tooltip="true"
            v-for="(item, index) in columns" :key="index"
          />
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[6, 12, 18, 24]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {  detail } from '@/api/user'
  export default {
    name: "UserDetails",
    props:{
      uid: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        loading: false,
        columns: [],
        Visible: false,
        list: [
          { val: '0', label: '房租缴费记录' },
          { val: '1', label: '保证金缴费记录' },
          { val: '2', label: '滞纳金缴费记录' },
          { val: '3', label: '物业费缴费记录' },
        ],
        tableData: {
          data: [
            {
              orderId: '123456789',
              realName:'ceshi'
            },
            {
              orderId: '123456',
              realName:'ceshi2'
            },
          ],
          total: 0
        },
        tableFrom: {
          page: 1,
          limit: 6,
          type : '0',
          userId : ''
        },
        psInfo: null,
        imageUrl:'',
      }
    },
    mounted(){
      this.imageUrl = process.env.VUE_APP_IMAGE_URL
      if(this.uid){
        this.getHeader()
        this.getInfo()
      }

    },
    methods: {
      changeType(key) {
        this.tableFrom.type = key
        this.getInfo()
        // if(key === '1'){
        //   this.integral()
        // }else{
        //   this.getInfo()
        // }
      },
      getInfo() {
        this.tableFrom.userId = this.uid

        //todo 房租缴费记录的接口
        // this.loading = true
        // infobyconditionApi(this.tableFrom).then(res => {
        //   this.tableData.data = res.list
        //   this.tableData.total = res.total

          switch (this.tableFrom.type) {
            case '0':
              this.columns = [
                {
                  title: '租赁证编号',
                  key: 'orderId',
                  minWidth: 250
                },
                {
                  title: '所属房屋',
                  key: 'realName',
                  minWidth: 90
                }
              ]
              break;
            case '1':
              this.columns = [
                {
                  title: '租赁证编号',
                  key: 'orderId',
                  minWidth: 120
                },
                {
                  title: '所属房屋',
                  key: 'realName',
                  minWidth: 120
                },
                {
                  title: '缴纳金额',
                  key: 'createTime',
                  minWidth: 120
                },
                {
                  title: '缴纳时间',
                  key: 'title',
                  minWidth: 120
                },
                {
                  title: '归还金额',
                  key: 'title',
                  minWidth: 120
                },
                {
                  title: '归还时间',
                  key: 'title',
                  minWidth: 120
                },

              ]
              break;
            case '2':
              this.columns = [
                {
                  title: '租赁证编号',
                  key: 'orderId',
                  minWidth: 120
                },
                {
                  title: '所属房屋',
                  key: 'realName',
                  minWidth: 120
                },
                {
                  title: '欠租金额',
                  key: 'endTime',
                  minWidth: 120
                },
                {
                  title: '滞纳天数',
                  key: 'minPrice',
                  minWidth: 120
                },
                {
                  title: '应缴金额',
                  key: 'updateTime',
                  minWidth: 120
                },
                {
                  title: '实缴金额',
                      key: 'updateTime',
                    minWidth: 120
                }
              ]
              break;
            case '3':
              this.columns = [
                {
                  title: '租赁证编号',
                  key: 'orderId',
                  minWidth: 120
                },
                {
                  title: '所属房屋',
                  key: 'realName',
                  minWidth: 120
                }
              ]
              break;
          }
        //   this.loading = false
        // }).catch(() => {
        //   this.loading = false
        // })
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getInfo()
        // if(this.tableFrom.type === '1'){
        //   this.integral()
        // }else{
        //   this.getInfo()
        // }
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getInfo()
        // if(this.tableFrom.type === '1'){
        //   this.integral()
        // }else{
        //   this.getInfo()
        // }
      },
      getHeader() {
        detail(this.uid).then(res => {
          this.psInfo = res
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .avatar{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .dashboard-workplace {
    &-header {
      &-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-right: 16px;
        font-weight: 600;
      }

      &-tip {
        width: 82%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -12px;
        &-title {
          font-size: 13px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 18px;
          padding: 10px 0 10px;
        }

        &-desc {
          &-sp {
            width: 32%;
            color: #17233D;
            font-size: 13px;
            display: inline-block;
          }
        }
      }

      &-extra {
        .ivu-col {
          p {
            text-align: right;
          }

          p:first-child {
            span:first-child {
              margin-right: 4px;
            }

            span:last-child {
              color: #808695;
            }
          }

          p:last-child {
            font-size: 22px;
          }
        }
      }
    }
  }
  .pb-1{
    padding-bottom: 10px;
  }
  .mr20{
    margin: 0 20px;
  }
  .border_bottom{
    border-bottom: 1px solid #E7EAEC;
  }
  .pb-24{
    padding-bottom: 24px;
  }
</style>
